/*
 * @Author: LXX
 * @Date: 2021-09-17 16:17:53
 * @LastEditTime: 2021-09-18 14:05:50
 * @LastEditors: LXX
 * @Description:
 * @FilePath: \gold_miner\src\page\utils\createObj.js
 */
import React, { Component } from "react";

class Obj extends Component {
    autoRunAnimationTimer = null;
    constructor(props) {
        super(props);
        console.log(props);
        this.state = {
            name: props.name || "",
            positionX: props.positionX || 0, // 中心点位置X
            positionY: props.positionY || 0, // 中心点位置Y
            angle: props.angle || 0, // 旋转角度
            width: props.width || undefined, // 宽
            height: props.height || undefined, // 高
            picSrc: props.picSrc || [undefined], // 贴图， 应先import
            animationDuration: props.animationDuration || 0.1, // 贴图动画延时， 如果有一个以上的贴图资源的话，根据这个值轮流播放
            collisionBoxType: props.collisionBoxType || "none", // 碰撞箱类型， 仅支持none(无碰撞体积), rectangle(矩形), circular(圆形)
            collisionBoxWidth: props.collisionBoxWidth || 0, // 对于rectangle， 碰撞箱宽度
            collisionBoxHeight: props.collisionBoxHeight || 0, // 对于rectangle， 碰撞箱高度
            collisionBoxRadius: props.collisionBoxRadius || 0, // 对于circular， 碰撞箱半径
            zIndex: props.zIndex || 1, // 第几图层
            picNum: props.picNum || 0, // 目前播放到第几张贴图
        };
        this.autoRunAnimation = this.autoRunAnimation.bind(this);
    }

    componentDidMount() {
        this.autoRunAnimation();
    }

    componentWillUnmount() {
        if (this.autoRunAnimationTimer) {
            clearInterval(this.autoRunAnimationTimer);
            this.autoRunAnimationTimer = null;
        }
    }

    // 自动播放贴图动画
    autoRunAnimation({ picSrc, animationDuration, picNum } = this.state) {
        if (picSrc.length > 1 && animationDuration > 0) {
            if (this.autoRunAnimationTimer) {
                clearInterval(this.autoRunAnimationTimer);
                this.autoRunAnimationTimer = null;
            }
            this.autoRunAnimationTimer = setInterval(() => {
                this.setState({ picNum: (picNum + 1) % picSrc.length });
            }, animationDuration);
        }
    }

    shouldComponentUpdate(props) {
        if (
            props.animationDuration !== this.state.animationDuration ||
            props.picSrc !== this.state.picSrc ||
            props.picNum !== this.state.picNum
        ) {
            this.setState(
                {
                    picSrc: props.picSrc,
                    animationDuration: props.animationDuration,
                    picNum: props.picNum,
                },
                () => {
                    this.autoRunAnimation();
                }
            );
        }
        if (props !== this.props) {
            this.setState({
                name: props.name || "",
                positionX: props.positionX || 0, // 中心点位置X
                positionY: props.positionY || 0, // 中心点位置Y
                angle: props.angle || 0, // 旋转角度
                width: props.width || undefined, // 宽
                height: props.height || undefined, // 高
                collisionBoxType: props.collisionBoxType || "none", // 碰撞箱类型， 仅支持none(无碰撞体积), rectangle(矩形), circular(圆形)
                collisionBoxWidth: props.collisionBoxWidth || 0, // 对于rectangle， 碰撞箱宽度
                collisionBoxHeight: props.collisionBoxHeight || 0, // 对于rectangle， 碰撞箱高度
                collisionBoxRadius: props.collisionBoxRadius || 0, // 对于circular， 碰撞箱半径
                zIndex: props.zIndex || 1, // 第几图层
            });
        }
        return true;
    }

    render() {
        return (
            <div
                style={{
                    display: "inline-block",
                    position: "absolute",
                    left: `${this.state.positionX}px`,
                    top: `${this.state.positionY}px`,
                    transform: `rotate(${this.state.angle})`,
                    boxSizing: "border-box",
                    ...this.props.style,
                }}
            >
                <img
                    style={{
                        display: "inline-block",
                        position: "absolute",
                        boxSizing: "border-box",
                        width: `${this.state.width}px`,
                        height: `${this.state.height}px`,
                    }}
                    src={this.state.picSrc[this.state.picNum]}
                    alt={`贴图${this.state.name}`}
                />
                <span
                    style={{
                        border: "1px red solid",
                        backgroundColor: "rgba(255, 0, 0, 0.3)",
                        position: "absolute",
                        display: this.props.showCollisionBox
                            ? "inline-block"
                            : "none",
                        boxSizing: "border-box",
                        width: (() => {
                            switch (this.state.collisionBoxType) {
                                case "rectangle":
                                    return `${this.state.collisionBoxWidth}px`;
                                case "circular":
                                    return `${this.state.collisionBoxRadius}px`;
                                default:
                                    return 0;
                            }
                        })(),
                        height: (() => {
                            switch (this.state.collisionBoxType) {
                                case "rectangle":
                                    return `${this.state.collisionBoxHeight}px`;
                                case "circular":
                                    return `${this.state.collisionBoxRadius}px`;
                                default:
                                    return 0;
                            }
                        })(),
                        borderRadius:
                            this.state.collisionBoxType === "circular"
                                ? `${this.state.collisionBoxRadius}px`
                                : 0,
                    }}
                />
            </div>
        );
    }
}

export default Obj;
